<template>
  <div>
    <el-table
      border
      :data="tableData"
      v-loading="loading"
    >
      <el-table-column
        prop="goodsId"
        :label="$t('table.ListingIDAndSKU')"
        min-width="200"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="row.isTB">
            {{ $t('shipment.Not labeled') }} {{row.sku ? `(${row.sku})` : ''}}
          </template>
          <template v-else-if="row.isSystemLabel">
            {{ $t('shipment.System label') }} ({{row.sku}})
          </template>
          <template v-else>
            {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
          </template>
        </template>
      </el-table-column>
      <m-l-code-column></m-l-code-column>
      <el-table-column
        prop="goodsNumInBox"
        label="箱装数"
        min-width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="boxNum"
        label="库存数量"
        min-width="150"
        align="center"
      >
        <template v-slot="{row}">
          <template v-if="canEdit">
            <el-input-number v-model="row.boxNum" @change="changeStock(row)" :min="0" :precision="0"></el-input-number>
          </template>
          <template v-else>
            {{row.boxNum}}
          </template>
        </template>
      </el-table-column>

    </el-table>
    <el-button type="primary" class="mgt10" :disabled="btnDisabled" @click="dialog = true;" v-if="canEdit">修改库存</el-button>
    <el-dialog
      :title="$t('stock.sureEditStock')"
      :visible.sync="dialog"
      width="500px"
    >
      <div style="margin-bottom: 20px;">{{ $t('stock.editStockText1') }}：</div>
      <div
        v-for="item in editBoxList"
        :key="item.id"
        class="mgb10 mgt10"
      >
          <span class="mgr10">

            <template v-if="item.isTB">
                {{ $t('shipment.Not labeled') }} {{item.sku ? `(${item.sku})` : ''}}
            </template>
            <template v-else-if="item.isSystemLabel || item.isSystem">
              {{ $t('shipment.System label') }} ({{item.sku}})
            </template>
            <template v-else>
              {{item.goodsId}}{{item.sku ? `(${item.sku})` : ''}}
            </template>
            （箱装数：{{item.goodsNumInBox}}）
            :</span>
        <span class="font-red">{{item.boxNum}}</span>
      </div>

      <div class="font-red mgt20">
        {{$t('stock.editStockText2')}}
      </div>
      <div class="footer mgt20">
        <el-button @click="dialog = false">{{$t('common.cancel')}}</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import {getBoxStock} from "@/api/stock";

export default {
  name: "EditStockNumBox",
  components: {MLCodeColumn},
  props: {
    suitId: {
      type: [Number,String],
      required: true,
    },
    boxType: {
      type: String,
      required: true,
    },
    canEdit: {
      type: Boolean,
      default: true,
    },
    warehouseId: {
      type: [Number,String],
      required: true,
    },
  },
  watch: {
    boxType(){
      this.getData()
    },
    warehouseId(){
      this.getData()
    },
  },
  computed: {
    btnDisabled(){
      return !this.tableData.some(item=> item.boxNum !== item.originBoxNum)
    },
    editBoxList(){
      return this.tableData.filter(item => item.boxNum !== item.originBoxNum)
    }
  },
  data(){
    return {
      dialog: false,
      btnLoading: false,
      loading: false,
      queryParams: {
        suitId: this.suitId,
        boxType: this.boxType,
      },
      tableData: [],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      this.loading = true
      getBoxStock({
        suitId: this.suitId,
        boxType: this.boxType,
        warehouseId: this.warehouseId,
      })
        .then(res=>{
          this.loading = false
          this.tableData = res.data.map(item=>{
            item.originBoxNum = item.boxNum;
            return item
          })
        })
    },
    changeStock(row){
      if(row.boxNum === undefined){
        row.boxNum = 0
      }
    },
  }
}
</script>


<style scoped lang="scss">

</style>
